import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Form, Icon, Input, Button} from 'antd';
import API from '../../../api/auth';
import parseQuery from '../../utils/parseQuery';
import './ResetPassword.scss';

const FormItem = Form.Item;

class ResetPassword extends Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
    };
    this.handleConfirm = this.handleConfirm.bind(this);
  }
  handleConfirm = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        const search = decodeURIComponent(this.props.location.search);
        const query = parseQuery(search.slice(1));
        const params = {
          ...query,
          newPassword: values.password,
          confirmPassword: values.confirm,
        };
        const response = await API.assignPassword(params);
        if (response.code === 1) {
          this.props.history.push('/dashboard');
        } else {
          // message.error('重置失败！');
        }
      }
    });
  }
  handleConfirmBlur = (e) => {
    this.setState({
      confirmDirty: this.state.confirmDirty || !!e.target.value,
    });
  }
  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('2次密码输入不一致！');
    } else {
      callback();
    }
  }
  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login-view">
        <div className="left">
          <img src="/images/bg.png" alt="首页" />
        </div>
        <div className="right">
          <div className="login-wrapper">
            <img className="logo" src="/images/ps-logo.png" alt="logo" />
            <div className="label">设置密码</div>
            <div className="prompt">
              <i className="anticon anticon-check-circle" />
              <span>已通过邮箱验证</span>
            </div>
            <div className="login-form">
              <Form onSubmit={this.handleConfirm} className="login-form">
                <FormItem>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入新密码！' }, {
                      validator: this.validateToNextPassword,
                    }],
                  })(<Input size="large" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="输入新密码" />)
                  }
                </FormItem>
                <FormItem>
                  {getFieldDecorator('confirm', {
                    rules: [{ required: true, message: '请再次输入新密码！' }, {
                      validator: this.compareToFirstPassword,
                    }],
                  })(<Input size="large" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="再次输入新密码" onBlur={this.handleConfirmBlur} />)
                  }
                </FormItem>
                <FormItem>
                  <Button size="large" type="primary" htmlType="submit" className="login-form-button">确定</Button>
                </FormItem>
              </Form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ResetPassword.propTypes = {
  form: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
};

const WrappedReSetPasswordForm = Form.create()(ResetPassword);

export default withRouter(WrappedReSetPasswordForm);
